<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预约进出港买酒</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/cipher-core.js"></script>
<script type="text/javascript" src="js/tripledes.js"></script>
<script type="text/javascript" src="js/mode-ecb.js"></script>
<script src="js/vue.min.js"></script>
<style type="text/css">
	body{
		margin: 20px;
	}
	.getCode{
		width: auto;
		line-height: 40px;
		text-align: center;
		margin: 20px;
		color: #fff;
		background-color: #3595f4;
		border-radius: 10px;
		cursor: pointer;
	}
	.codeBox, .codeImg{
		width: 100%;
		text-align: center;
		margin: 10px 0;
	}
	.codeImg img{
		width: 100px;
		height: 50px;
		margin: 0 auto;
		cursor: pointer;
	}
	.sendBox{
		width: auto;
		line-height: 40px;
		text-align: center;
		margin: 20px;
		color: #fff;
		background-color: #3595f4;
		border-radius: 10px;
		cursor: pointer;
	}
</style>

</head>
<body>
<div class="demo">
	<div class="container">
		<div id="maotai">
			<div class="codeBox">
				<input type="text" placeholder="请填写短信验证码" v-model="smsCode">
			</div>
			<div class="getCode" @click="getSms">获取验证码</div>
			<div class="codeImg">
				<img @click="resetImg" :src="codeImg">
			</div>
			<div class="codeBox">
				<input type="text" v-model="validateCode" placeholder="请填写图片验证码">
			</div>
			<div class="sendBox" @click="send">提交</div>
			<div>
				<div>姓名：{{userName}}</div>
				<div>身份证号：{{idCard}}</div>
				<div>手机号：{{telNumber}}</div>
				<div>航空公司：{{airways}}</div>
				<div>航班号：{{flightNo}}</div>
				<div>起飞机场：{{startStation}}</div>
				<div>降落机场：{{terminalStation}}</div>
				<div>航班日期：{{flightDate}}</div>
				<div>购买数量：{{appointCount}}</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$.ajaxPrefilter( function (options) {
		if (options.crossDomain && jQuery.support.cors) {
		    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
		    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
		}
	});
	new Vue({
	    el:'#maotai',
	    data:{
	      	userName: '',
			idCard: '',
			airways: '', // 航空公司
			flightNo: '', // 请输入4位数航班号
			startStation: '', // 起飞
			terminalStation: '', // 降落
			flightDate: '', // 航班日期：
			telNumber: '', // 手机号
			appointCount: '2', // 数量
			validateCode: '',
			token: '',
			smsCode: '',
			codeImg: 'http://www.gzairports.com:11111/order/creatImgCode.action',
			loading: false,
			key: '',
			message: ''
	    },
	   	mounted() {
	   		// 获取连接携带的参数
	   		this.getMessage()
	   		this.userName = this.getUrlKey('userName');
			this.idCard = this.getUrlKey('idCard');
			this.airways = this.getUrlKey('airways');
			this.flightNo = this.getUrlKey('flightNo');
			this.startStation = this.getUrlKey('startStation');
			this.terminalStation = this.getUrlKey('terminalStation');
			this.flightDate = this.getUrlKey('flightDate');
			this.telNumber = this.getUrlKey('telNumber');
			this.appointCount = this.getUrlKey('appointCount');
			console.log(this.userName)
	   	},
	    methods:{
	    	getUrlKey(key) {
	    		var url = decodeURIComponent(window.location.search)
	    		var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
			    var r = url.substr(1).match(reg);
			    console.log(window.location.search)
			    if (r != null) return unescape(r[2]); return null;
	    	},
	    	getMessage() {
	    		var _this = this;
		   		$.ajax({
					url: "http://www.gzairports.com:11111/searchOrderAppointmentSettings.action",
					type: "post",
					data: {},
					success: function(res){
						var data = JSON.parse(res);
						if (data.result.success == true) {
							_this.key = data.result.extend.appointmentSettings[0].deliverTimeApart + data.result.extend.appointmentSettings[0].remainApoointmentPersonCountApart;
							_this.message =data.result.extend.appointmentSettings[0].deliverTimeDepart + data.result.extend.appointmentSettings[0].remainApoointmentPersonCountDepart;
						}else{
							layer.msg(data.result.msg);
						}
					},
					error: function(res) {
					}
				});
	    	},
	    	setToken() {
	    		var keyHex = CryptoJS.enc.Utf8.parse(this.key);
			   	var encrypted = CryptoJS.DES.encrypt(this.message, keyHex, {
			       	mode: CryptoJS.mode.ECB,
			       	padding: CryptoJS.pad.Pkcs7
			   	});
			   return encrypted.ciphertext.toString();
			},
	    	getSms() {
	    		if (this.loading) {
	    			return layer.msg("正在请求短信，请等待");
	    		}
	    		this.loading = true;
	    		var _this = this;
	    		var index = layer.load(1, {
		              shade: [0.1,'#fff']
		        });
	    		$.ajax({
					url: "http://www.gzairports.com:11111/sendSms.action",
					type: "post",
					data: {
						telNumber:_this.telNumber,
						startStation: _this.startStation,
						terminalStation:_this.terminalStation,
						idCard:_this.idCard
					},
					success: function(info){
						layer.close(index)
						_this.loading = false;
						info = JSON.parse(info);
						if (info.result.success == true) {
							layer.msg('发送成功');
						}else{
							layer.msg(info.result.msg);
						}
					},
					error: function(res) {
						layer.close(index)
						_this.loading = false;
					}
				});
	    	},
	    	send() {
	    		if (this.loading) {
	    			return layer.msg("正在请求短信，请等待");
	    		}
	    		this.loading = true;
	    		var index = layer.load(1, {
		              shade: [0.1,'#fff']
		        });
	    		var _this = this;
	    		this.token = this.setToken();
	    		$.ajax({
					url: "http://www.gzairports.com:11111/appointment.action",
					type: "post",
					data: {
						userName: _this.userName,
						idCard: _this.idCard,
						airways: _this.airways,
						flightNo: _this.flightNo,
						startStation: _this.startStation,
						terminalStation: _this.terminalStation,
						flightDate: _this.flightDate,
						telNumber: _this.telNumber,
						appointCount: _this.appointCount,
						validateCode: _this.validateCode,
						token:_this.token,
						smsCode:_this.smsCode
					},
					success: function(info){
						layer.close(index)
						_this.loading = false;
						info = JSON.parse(info);
						_this.resetImg()
						if (info.result.success == true) {
							layer.msg('提交成功');
						}else{
							_this.getMessage();
							layer.msg(info.result.msg);
						}
					},
					error: function(res) {
						layer.close(index)
						_this.loading = false;
					}
				});
	    	},
	    	resetImg() {
	    		var timenow = new Date().getTime();
	    		this.codeImg = 'http://www.gzairports.com:11111/order/creatImgCode.action?d='+ timenow;
	    	}
	    }
	 })
</script>
</body>
</html>